<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" class="admin-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@4.5.0/dist/css/swiper.min.css">
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <link rel="stylesheet" th:href="@{/css/theme.css}">
    <script type="text/javascript" th:src="@{/js/vue.js}"></script>
    <script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>
    <script type="text/javascript">
        Vue.config.productionTip = false;
    </script>
</head>
<body>
<input type="hidden" id="ctxName" th:value="${ctxName}">
<!-- style="display: none;" 防止 初始花屏 -->
<div class="app" :class="['theme-0', 'theme-' + themeV, (is_fold ? 'fold' : ''), (themeToggling ? 'themeToggling' : '')]" style="display: none;" :style="'display: block;'">
    <!-- 左 -->
    <div class="nav-left">
        <!-- 左上 -->
        <div class="nav-left-top" :title="title" @click="showPage(homePage)">
            <img :src="logo_url" class="admin-logo" v-if="logo_url != null && logo_url != ''">
            <span v-else style="margin-right: 25px;" title="无logo时的占位">&emsp;</span>
            <span class="nav-title" style="font-size: 1.05em;">{{title}}</span>
        </div>

        <!-- 左下 -->
        <div class="nav-left-bottom">
            <div class="menu-box-1">
                <div class="menu-box-2">

                    <!-- 菜单 -->
                    <el-menu default-active="2"
                             class="el-menu-style-1"
                             :unique-opened="unique_opened"
                             :default-active="default_active"
                             :default-openeds="default_openeds"
                             :collapse="is_fold"
                             @select="selectMenu"
                    >

                        <div v-for="(menu, index) in menuList" :key="index">

                            <!-- 1 子菜单 -->
                            <el-menu-item v-if="menu.childList == null" :index="menu.id + '' ">
                                <i :class="menu.icon" :title="menu.name"></i>
                                <span class="menu-name">{{menu.name}}</span>
                            </el-menu-item>

                            <!-- 1 父菜单 -->
                            <el-submenu v-else :index="menu.id + '' ">
                                <template slot="title">
                                    <i :class="menu.icon" :title="menu.name"></i>
                                    <span class="menu-name">{{menu.name}}</span>
                                </template>

                                <!-- 遍历其子项 -->
                                <div v-for="(menu2, index) in menu.childList" :key="index">
                                    <!-- 2 如果是子菜单 -->
                                    <el-menu-item v-if="menu2.childList == null" :index="menu2.id + '' ">
                                        <i :class="menu2.icon" :title="menu2.name"></i>
                                        {{menu2.name}}
                                    </el-menu-item>

                                    <!-- 2 如果是父菜单 -->
                                    <el-submenu v-else :index="menu2.id + '' ">
                                        <template slot="title">
                                            {{menu2.name}}
                                        </template>
                                        <el-menu-item v-for="(menu3, index3) in menu2.childList" :index="menu3.id + '' " :key="index3" >
                                            {{menu3.name}}
                                        </el-menu-item>
                                    </el-submenu>

                                </div>

                            </el-submenu>

                        </div>

                    </el-menu>



                </div>
            </div>


        </div>

    </div>

    <!-- 右边 -->
    <div class="nav-right" :class="(is_fold_right ? 'is_fold_right' : '')">

        <!-- 右边，第一行 -->
        <div class="nav-right-1">
            <div class="tools-left">
						<span title="折叠菜单" class="tool-fox" v-if="is_fold == false" @click="fold_start()">
							<i class="el-icon-s-fold"></i>
						</span>
                <span title="展开菜单" class="tool-fox" v-if="is_fold == true" @click="fold_end()">
							<i class="el-icon-s-unfold"></i>
						</span>
                <span title="刷新" class="tool-fox" onclick="reload()">
							<i class="el-icon-refresh-right" style="font-weight: bold;"></i>
						</span>
                <span title="当前时间" class="tool-fox">
							<span style="font-size: 0.90em;">{{now_time}}</span>
						</span>
            </div>
            <div class="tools-right">
						<span title="点击登录" class="tool-fox" onclick="location.href='login.html'" v-if="user == null">
							<span style="font-size: 0.8em; font-weight: bold; position: relative; top: -2px;">未登录</span>
						</span>
                <span title="我的信息" class="tool-fox user-info"  style="padding: 0;" v-if="user != null">
							<el-dropdown @command="handleCommand" trigger="click" size="medium">
								<span class="el-dropdown-link user-name" style="height: 100%; padding: 0 1em; display: inline-block;">
									<img :src="user.avatar" class="user-avatar">
									{{user.username}}
									<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item v-for="drop in dropList" :command="drop.name" :key="drop.name">{{drop.name}}</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</span>
                <span title="切换效果" class="tool-fox" style="padding: 0;">
							<el-dropdown @command="toggleSwitch" trigger="click" size="medium">
								<span class="el-dropdown-link" style="height: 100%; padding: 0 1em; display: inline-block;">
									<i class="el-icon-sort" style="font-weight: bold; transform: rotate(90deg)"></i>
									<span style="font-size: 0.9em;">切换</span>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item :command="s.value" v-for="s in switchList" :key="s.name">
										<span :style=" switchV == s.value ? 'color: #44f' : '' ">{{s.name}} </span>
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</span>
                <span title="主题" class="tool-fox" style="padding: 0;">
							<el-dropdown @command="toggleTheme" trigger="click" size="medium">
								<span class="el-dropdown-link" style="height: 100%; padding: 0 1em; display: inline-block;">
									<i class="el-icon-price-tag" style="font-weight: bold;"></i>
									<span style="font-size: 0.9em;">主题</span>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item :command="t.value" v-for="t in themeList" :key="t.name">
										<span :style=" themeV == t.value ? 'color: #44f' : '' ">{{t.name}} </span>
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</span>
                <span title="全屏" class="tool-fox" v-if="is_full_screen == false" @click="is_full_screen = true">
							<i class="el-icon-rank" style="font-weight: bold; transform: rotate(45deg)"></i>
						</span>
                <span title="退出全屏" class="tool-fox" v-if="is_full_screen == true" @click="is_full_screen = false">
							<i class="el-icon-bottom-left" style="font-weight: bold; "></i>
						</span>
            </div>
        </div>

        <!-- 右边，第二行 -->
        <div class="nav-right-2">
            <div class="towards-left" @click="scrollToLeft" title="向左滑">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="towards-middle">

                <div class="page-title-box" :style="{left: scrollX + 'px'}">
                    <div class="page-title" :class=" (page == nativePage ? 'page-native' : '') "
                         v-for="page in pageList"
                         @click="showPage(page)"
                         @contextmenu.prevent="right_click(page, $event)"
                    >
                        <i class="el-icon-caret-right"></i>
                        <span>{{page.name}}</span>
                        <i class="el-icon-close" v-if="!page.hide_close" @click.stop="closePage(page)"></i>
                    </div>
                </div>



            </div>
            <div class="towards-right" @click="scrollToRight" title="向右滑">
                <i class="el-icon-arrow-right"></i>
            </div>
        </div>

        <!-- 右边，第三行 -->
        <!-- <div class="nav-right-3">
            <span v-for="page in pageList" :key="page.id">
                <iframe :src="page.url" :id=" 'iframe' + page.id " class="iframe" :class="page == nativePage ? 'iframe-native' : null"></iframe>
            </span>
        </div> -->

        <!-- 右边，第三行 -->
        <!-- swiper滑动 用v-for卡一半 -->
        <div class="nav-right-3">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
<!--
                        <iframe src="main.html" id="iframe-1" class="iframe"></iframe>
-->
                    </div>
                </div>
            </div>
        </div>


    </div>


    <!-- 鼠标右键弹出的盒子 -->
    <div class="right-box" :style="{left: rightZB.x + 'px', top: rightZB.y + 'px'}" v-if="rightShow" tabindex="-1" @blur="rightShow = false">
        <div @click="rightShow = false; right_f5()">刷新</div>
        <div @click="rightShow = false; right_close()">关闭</div>
        <div @click="rightShow = false; right_close_other()">关闭其它</div>
        <div @click="rightShow = false; right_close_all()">关闭所有</div>
        <div @click="rightShow = false; right_xf()">悬浮打开</div>
        <div @click="rightShow = false; right_window_open()">新窗口打开</div>
        <div @click="rightShow = false">取消</div>
    </div>


</div>

<script src="https://unpkg.com/swiper@4.5.0/dist/js/swiper.min.js"></script>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script th:src="@{/js/jquery.cookie.js}"></script>
<script th:src="@{/js/appactions.js}"></script>
<script th:src="@{/js/theme/admin-util.js}"></script>
<script th:src="@{/js/app/index.js}"></script>
<script th:src="@{/js/theme/index.js}"></script>
<script th:src="@{/js/theme/my-code.js}"></script>
<script>
    // 设置模板标题
    sp.title = '[[${ctxName}]]';
    sp.logo_url = 'depot/admin-logo.png';    // 设置logo图标地址   默认值：sa-resources/admin-logo.png
    sp.icon_url = 'depot/admin-logo.png';    // 设置icon图标地址   默认值：sa-resources/admin-logo.png
</script>
</body>
</html>
